<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				border: solid 1px cadetblue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="300" height="800"></canvas>
		<script type="text/javascript">
			/* 方法获取HTML <canvas> 元素的引用并获取这个元素的context——图像稍后将在此被渲染 */
			const ctx = document.getElementById('canvas').getContext('2d');
			console.log(ctx);
			ctx.beginPath(); //要开始绘制
			ctx.moveTo(14,15);// 设置绘制起始点
			ctx.lineTo(104, 140);// 设置经过某个位置
			ctx.lineTo(104, 15);// 设置经过某个位置
			ctx.closePath();//结束路径
			
			ctx.lineCap="round" //线条边缘设置圆角
			// ctx.lineJoin = 'round' //边角设置圆角
			ctx.miterLimit = 2 //边角裁剪
			ctx.strokeStyle="pink";
			ctx.fillStyle="pink";
			ctx.lineWidth = 10;
			ctx.stroke();//边框
			// ctx.fill();//填充
		</script>
	</body>
</html>
